<script setup>
import service from '@/utils/request.utils';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { RESPONSE_MESSAGE } from '@/constant/response'
import { useStore } from 'vuex';
import { setCookie } from '@/utils/cookie.utils';

const router = useRouter()
const store = useStore()

const form = ref({
    'username': '17879386605',
    'password': 's1807931',
    'keep': false,
})

function login() {
    let res = service.post("/login", { username, password })
    console.log(res)
}

function switchTo(routerName) {
    router.push(routerName)
}

async function submitForm() {
    let res = await service.post("/login", form.value)
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '登陆失败。状态码为: ' + res.status,
            type: 'error'
        })
        return
    }

    if (res.data.code != '0') {
        ElMessage({
            message: RESPONSE_MESSAGE[res.data.code],
            type: "warning"
        })
    } else {
        let data = res.data.data
        let token = data.token
        let user = data.user

        store.commit('updateUser', user)
        store.commit('updateToken', token)

        let userString = JSON.stringify(user)
        // 默认是一天, keep = 1 ，则为7天 
        if (form.value.keep) {
            setCookie("token", token, 7)
            setCookie("user", userString, 7)
        } else {
            setCookie("token", token, 1)
            setCookie("user", userString, 1)
        }

        ElMessage({
            message: "登陆成功",
            type: "success"
        })
        setTimeout(() => {
            router.push("/")
        }, 0.5);
    }

}

</script>
<template>
    <div id="outer">
        <div id="login-bg">
            <div id="login-form">
                <div id="login-form-title">
                    欢迎使用CB-GPT
                </div>
                <div id="login-form-main">
                    <el-form :model="form" label-width="auto" style="max-width: 600px; position: relative; bottom: 1em;">
                        <el-form-item label="账号">
                            <el-input placeholder="请输入手机号" v-model="form.username" />
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input placeholder="请输入密码" v-model="form.password" show-password />
                        </el-form-item>
                        <el-form-item style="position: relative;">
                            <el-button style="position: relative; right: 5px;" type="primary" @click="submitForm()">
                                登陆
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div id="setting">
                <!-- 不能添加click，否则跳转到login目录会直接触发click -->
                <div id="register"><el-link href="/#/register" type="primary">注册</el-link></div>
                <div id="rememberMe">
                    <el-checkbox v-model="form.keep">七天免登陆</el-checkbox>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
#outer {
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    font-weight: 900;
}

#login-bg {
    height: 60%;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#login-form {
    width: 100%;
    height: 70%;
    /* display: flex;
    flex-direction: column;
    justify-content: space-around; */
}

#login-form-title {
    height: 30%;
}

#login-form-main {
    margin-top: 10%;
    height: 60%;
    position: relative;
}


#setting {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

#register {
    display: flex;
    justify-content: center;
    align-items: center;
}

#rememberMe {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>